<script setup lang="ts">
import useTodo from '../../composables/useTodo'
const { doneCount, count } = useTodo()
</script>

<template>
  <div class="bg-gradient-to-r from-sky-500 to-indigo-500 h-1/4 flex flex-col-reverse">
    <div class="text-white bg-white/70 dark:bg-black/70 p-5 flex flex-col">
      <span class="text-2xl font-bold">
        <i class="fa-duotone fa-calendar-day mr-2 text-gray-700 dark:text-white"></i>
        <span class="bg-clip-text text-transparent bg-gradient-to-r from-[#42d392] to-[#647eff]">My Day({{ doneCount }}/{{ count }})</span>
      </span>
      <span class="text-sm text-gray-700 my-1 dark:text-gray-400">{{ new Date() }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
